<template>
<section class="rescue">
    <el-tabs v-model="activeName" >
      <el-tab-pane label="救援队审核" name="first">
        <div class="tableBox">
           <el-table
              :data="verifingRescue"
              border
              style="width: 100%">
              <el-table-column prop="teamId" label="编号" width="100"> </el-table-column>
              <el-table-column  prop="teamName"  label="名称"  width="100"></el-table-column>
              <el-table-column  prop="teamPhone"  label="电话号码" ></el-table-column>
              <el-table-column  prop="teamPassword"  label="密码"  width="100"></el-table-column>
               <el-table-column  label="操作"  width="130">
                  <template slot-scope="scope">
                    <el-button
                      type="primary" plain
                      size="small"
                      @click="handleEdit(scope.$index, scope.row)">审核</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已注册救援队" name="second">
        <div class="tableBox">
           <el-table
              :data="verifiedRescue"
              border
              style="width: 100%">
              <el-table-column prop="teamId" label="编号" width="100"> </el-table-column>
              <el-table-column  prop="teamName"  label="名称"  width="100"></el-table-column>
              <el-table-column  prop="teamPhone"  label="电话号码" ></el-table-column>
              <el-table-column  prop="teamPassword"  label="密码"  width="100"></el-table-column>
              <el-table-column   label="洪水"  width="100">
                 <template slot-scope="scope">
                   {{transitionMark(scope.row.flood)}}
                </template>
              </el-table-column>
              <el-table-column   label="火灾"  width="100">
                 <template slot-scope="scope">
                   {{transitionMark(scope.row.fire)}}
                </template>
              </el-table-column>
              <el-table-column   label="户外"  width="100">
                <template slot-scope="scope">
                   {{transitionMark(scope.row.outdoor)}}
                </template>
              </el-table-column>
               <el-table-column   label="地震"  width="100">
                <template slot-scope="scope">
                   {{transitionMark(scope.row.earthquake)}}
                </template>
              </el-table-column>
               <el-table-column   label="其他"  width="100">
                <template slot-scope="scope">
                   {{transitionMark(scope.row.other)}}
                </template>
              </el-table-column>
            </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已注册志愿者" name="third">
        <div class="tableBox">
            <el-table
              :data="verifiedVolunteer"
              border
              style="width: 100%">
              <el-table-column prop="volunteerId" label="编号" width="100"> </el-table-column>
              <el-table-column  prop="name"  label="姓名"  width="100"></el-table-column>
              <el-table-column  prop="age"  label="年龄" width="200"></el-table-column>
              <el-table-column   label="性别" >
                <template slot-scope="scope">
                   {{getGender(scope.row.gender)}}
                </template>
              </el-table-column>
              <el-table-column  prop="password"  label="密码"  width="160"></el-table-column>
              <el-table-column  prop="phone"  label="电话" ></el-table-column>
              <!-- <el-table-column  prop="fire"  label="火灾"  width="100"></el-table-column> -->
            </el-table>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
    </el-tabs>
     <div class="detailContainer" ref="detailShrink">
         <div class="imgBox"  >
             <div style="width:100%;height: 30px;text-align: right;padding-right: 40px;box-sizing: border-box;">
                  <el-button size="small" icon="el-icon-close" circle @click="pushImg"></el-button>
             </div>
             <img :src="imgSrc" alt="">
             <el-button type="success" plain @click="acceptRescue" size="medium">接受</el-button>
             <el-button type="danger" plain @click="rejectRescue" size="medium">拒绝</el-button>
             <el-button type="primary" plain @click="pushImg" size="medium">稍后处理</el-button>
         </div>
      </div>
</section>
</template>
<script>
import "../css/RescueManage.css"
import EventCard from "@/components/EventCard.vue"
import EventTable from "@/components/EventTable.vue"
import TaskDialog from "@/components/TaskDialog.vue"
import * as echarts from 'echarts';
import axios from 'axios'


export default {
    data() {
        return {
           imgSrc:"",
           hideFlag:true,
           activeName: 'first',
           selectTeamId:null,  //被选择的队的编号
           verifingRescue:[],
           verifiedRescue:[],
           verifiedVolunteer:[]
        };
    },
    mounted: function () {
        this.init()
        // axios.get('/verify/getAllRegisteringTeam',).then(res=>{
        //    this.verifingRescue=res.data
        //    console.log(this.verifingRescue);
        // }).catch(err=>{
        //   console.log(err)
        // })
        // axios.get('/manager/getAllRegisteredTeam',).then(res=>{
        //    this.verifiedRescue=res.data
        //    console.log(this.verifiedRescue);
        // }).catch(err=>{
        //   console.log(err)
        // })
        // axios.get('/manager/getAllRegisteredOfficialVolunteer',).then(res=>{
        //    this.verifiedVolunteer=res.data
        //    console.log(this.verifiedVolunteer);
        // }).catch(err=>{
        //   console.log(err)
        // })
    },
    methods: {
      init(){
        this.verifingRescue=[]
        this.verifiedRescue=[]
        this.verifiedVolunteer=[]
        axios.get('/verify/getAllRegisteringTeam',).then(res=>{
           this.verifingRescue=res.data
           console.log(this.verifingRescue);
        }).catch(err=>{
          console.log(err)
        })
        axios.get('/manager/getAllRegisteredTeam',).then(res=>{
           this.verifiedRescue=res.data
           console.log(this.verifiedRescue);
        }).catch(err=>{
          console.log(err)
        })
        axios.get('/manager/getAllRegisteredOfficialVolunteer',).then(res=>{
           this.verifiedVolunteer=res.data
           console.log(this.verifiedVolunteer);
        }).catch(err=>{
          console.log(err)
        })
      },
      transitionMark(bool){
        if(bool){
          return "√"
        }else{
          return "×"
        }
      },
      getGender(bool){
        if(bool){
          return "男"
        }else{
          return "女"
        }
      },
      pushImg(){
          if(this.hideFlag){
            // console.log(this.$refs.detailShrink);
            this.$refs.detailShrink.style.right="-20px";
            this.hideFlag=false;
          }
          else{
            this.$refs.detailShrink.style.right="-500px"
            this.hideFlag=true;
        }
      },
      handleEdit(index, row){
        console.log(index);
        console.log(row);
        this.selectTeamId=row.teamId
        axios.get('/verify/getRegisteringTeamById?teamId='+this.selectTeamId).then(res=>{
           this.imgSrc="https://"+res.data.certificateType
           console.log(this.imgSrc);
           this.pushImg()
        }).catch(err=>{
          console.log(err)
        })
      },
      acceptRescue(){
        axios.get('/verify/pass?teamId='+this.selectTeamId).then(res=>{
           console.log(this.selectTeamId);
            this.$message({
              message: "审核通过成功",
              type: 'success'
              });
            this.init()
            this.selectTeamId=null
            this.pushImg()
        }).catch(err=>{
          console.log(err)
        })
      },
      rejectRescue(){
         axios.get('/verify/unPass?teamId='+this.selectTeamId).then(res=>{
           console.log(this.selectTeamId);
            this.$message({
              message: "拒绝审核成功",
              type: 'success'
              });
            this.selectTeamId=null
            this.pushImg()
        }).catch(err=>{
          console.log(err)
        })
      }   
    },
    components: { EventCard:EventCard,EventTable:EventTable,TaskDialog:TaskDialog}
};
</script>



// newEvents:[{index:0,status:1,eventType:"洪水",jingwei:[114.25,30.53],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsna"},
//            {index:1,status:1,eventType:"地震",jingwei:[114.24,30.54],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaa"},
//            {index:2,status:1,eventType:"户外",jingwei:[114.23,30.55],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa"},
//            {index:3,status:1,eventType:"其他",jingwei:[114.22,30.56],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa"},
//            {index:4,status:1,eventType:"火灾",jingwei:[114.21,30.57],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa能看到这立马我是最长的了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊"},
//            {index:5,status:1,eventType:"洪水",jingwei:[114.20,30.58],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa能看到这立马"},
//            {index:6,status:1,eventType:"洪水",jingwei:[114.20,30.59],phone:"15643245124",position:"xxx市xx区xx地",describe:"aqwertyuipasjdklzmxncbzgsnabsnaaaaaaaaaaaaaaa能看到这立马"}],

<!-- <div class="leftEvent">
      <div class="title">新增应急事件</div>
      <div class="newEventList">
       
      </div>
   </div>
   <div class="rightEvent">
     <div class="hisEventTable">
        <div class="title">已审核应急事件</div>
        <div class="hisEventList">
        </div>
     </div>
     <div class="hisEventChart" >

     </div>
   </div> -->